@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.@{prefix}-calendar {
  border: 1px solid @calendar-border-color;
  background-color: @calendar-bg;

  .@{prefix}-is-disabled {

    &.@{prefix}-calendar__table-body-cell {
      &:hover {
        cursor: not-allowed;
      }
    }

    .@{prefix}-calendar__table-body-cell-display {
      color: @calendar-body-cell-display-disabled-color;

      &:hover {
        box-shadow: none;
      }
    }

    &:hover {
      background-color: @calendar-bg;
    }
  }

  &--full {
    min-width: @calendar-full-min-width;

    .@{prefix}-calendar__control {
      padding: @calendar-control-padding;
    }

    .@{prefix}-calendar__title {
      font-size: @font-size-xl;
      flex: 1;
    }

    .@{prefix}-calendar__panel {
      padding: @calendar-panel-padding;
      position: relative;

      &-title {
        font-size: @calendar-head-title-font-size;
        line-height: @calendar-title-line-height;
        color: @calendar-title-color;
        position: absolute;
        top: @calendar-title-position-top;
      }
    }

    .@{prefix}-calendar__table {
      &-head-cell,
      &-body-cell {
        margin-right: @calendar-table-margin-right;
        position: relative;
      }

      &-body-cell {
        border-top: @calendar-border-size solid @calendar-body-cell-border-color;
        padding: @calendar-body-cell-padding;
        height: @calendar-body-cell-height;
        line-height: @calendar-body-line-height;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-left: @calendar-body-cell-margin-left;
        transition-duration: @calendar-transition-duration;
        transition-property: @calendar-transition-property;
        transition-timing-function: @calendar-transition-timing-function;

        &-content {
          min-height: @calendar-body-cell-content-min-height;
          padding-top: @calendar-body-cell-content-padding-top;
        }

        &.@{prefix}-is-checked {
          background-color: @calendar-body-cell-check-bg-color;

          &:hover {
            background-color: @calendar-body-cell-check-bg-color;
          }
        }

        &--now {
          border-top: 1px solid @calendar-highlight-color;

          .@{prefix}-calendar__table-body-cell-display {
            color: @calendar-highlight-color;
          }
        }
      }
    }

    .@{prefix}-calendar__footer {
      height: @calendar-footer-height;
      padding: @calendar-footer-padding;
      border-top: 1px solid @calendar-border-color;
    }
  }

  &--card {
    width: @calendar-card-width;

    .@{prefix}-calendar__control {
      padding: @calendar-card-calendar-control-padding;
      border-bottom: 1px solid @calendar-border-color;
    }

    .@{prefix}-calendar__panel {

      &.@{prefix}-calendar__panel--month {
        height: @calendar-card-calendar-panel-height-month;
        padding: @calendar-card-calendar-panel-padding-month;
      }

      &.@{prefix}-calendar__panel--year {
        height: @calendar-card-calendar-panel-height-year;
        padding: @calendar-card-calendar-panel-padding-year;
      }
    }

    .@{prefix}-calendar__table {
      width: @calendar-card-table-size;
      height: @calendar-card-table-size;
      display: flex;
      flex-direction: column;
      justify-self: start;
      align-items: flex-start;

      &-head,
      &-body {
        &-row {
          flex: @calendar-body-row-flex;
          background: @calendar-card-head-row-bg;
        }

        &-cell {
          width: @calendar-card-cell-size;
          height: @calendar-card-cell-size;
          margin: @calendar-card-body-cell-margin;
          justify-content: center;
          font-size: @calendar-card-body-cell-font-size;
          line-height: @calendar-card-body-cell-line-height;
          box-sizing: border-box;

          &-display {
            width: @calendar-card-cell-value-size;
            line-height: @calendar-card-cell-value-size;
          }
        }
      }

      &-body {
        display: flex;
        flex-direction: column;
        justify-self: center;
        align-items: center;
        flex: 1;

        &-cell {
          justify-content: center;
          align-items: center;

          &:hover {
            background-color: @calendar-bg;
          }

          &-display {
            font-size: @calendar-card-body-cell-display-font-size;
            text-align: center;
            border-radius: @calendar-card-body-cell-display-border-radius;
            transition-duration: @calendar-transition-duration;
            transition-property: @calendar-transition-property;
            transition-timing-function: @calendar-transition-timing-function;

            &:hover {
              box-shadow: inset 0 0 0 1px @calendar-highlight-color;
              transition: box-shadow @calendar-transition-duration @calendar-transition-timing-function;
              border-radius: 100%;
            }
          }

          &--now {

            .@{prefix}-calendar__table-body-cell-display {
              color: @calendar-highlight-color;
              font-weight: bold;
              position: relative;

              &::before {
                content: "";
                position: absolute;
                bottom: 1px;
                left: 50%;
                transform: translate(-50%);
                width: @calendar-card-checked-pointer-width;
                height: @calendar-card-checked-pointer-width;
                background: @calendar-highlight-color;
                border-radius: @calendar-card-checked-pointer-border-radius;
              }
            }
          }
        }
      }
    }

    .@{prefix}-is-checked {

      .@{prefix}-calendar__table-body-cell-display {
        background: @calendar-highlight-color;
        border-radius: 100%;
        color: white;
        font-weight: bold;
      }
    }

    .@{prefix}-calendar__footer {
      height: @calendar-card-footer-height;
      padding: @calendar-card-footer-padding;
      border-top: 1px solid @calendar-border-color;
    }
  }

  &__control {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    &-section {
      height: 100%;
      margin-right: @calendar-control-section-margin-right;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      &:last-child {
        margin-right: 0;
      }

      &-cell {
        height: @calendar-section-height;
        margin-right: @calendar-control-section-cell-margin-right;

        &:last-child {
          margin-right: 0;
        }

        .@{prefix}-select {

          &.@{prefix}-size-l {
            padding-right: @calendar-control-section-cell-select-padding-left-l;
          }

          &.@{prefix}-size-m {
            padding-right: @calendar-control-section-cell-select-padding-left-m;
          }

          &.@{prefix}-size-s {
            padding-right: @calendar-control-section-cell-select-padding-left-s;
          }
        }
      }
    }

    &-tag {
      height: @calendar-control-tag-height;
      padding: @calendar-control-tag-padding;
    }
  }

  &__panel {
    width: 100%;
  }

  &__table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;

    &-head,
    &-body {
      width: 100%;

      &-row {
        width: 100%;
        display: flex;
      }

      &-cell {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        font-size: @calendar-table-cell-font-size;
        line-height: @calendar-table-line-height;
        color: @calendar-cell-font-color;
        cursor: default;
        padding: @calendar-table-cell-padding;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    &-head {
      margin-bottom: @calendar-head-margin-bottom;
      display: block;

      &-row {
        padding-bottom: @calendar-header-row-padding;
        background: @calendar-head-bg-color;
      }

      &-cell {
        height: @calendar-head-cell-height;
        padding: @calendar-head-padding;
        font-size: @calendar-head-cell-font-size;
        line-height: @calendar-head-cell-line-height;
        color: @calendar-head-cell-color;
      }
    }

    &-body {
      &-cell {
        cursor: pointer;

        &:hover {
          background-color: @calendar-body-cell-hover-bg-color;
          transition: background-color @calendar-transition-duration @calendar-transition-timing-function;
        }

        &-display {
          font-size: @calendar-body-cell-display-font-size;
          font-weight: @calendar-body-cell-font-weight;
          color: @calendar-title-color;
        }
      }
    }
  }
}
